// src\views\news\Detail.jsx
// 游客模式 新闻详情
import { Button, Descriptions } from 'antd';
import axios from 'axios';
import moment from 'moment';
import React, { useEffect, useState } from 'react'

export default function Detail(props) {
    const [newsInfo, setnewsInfo] = useState(null);
    useEffect(() => {
        axios.get(`http://localhost:8888/news/${props.match.params.id}?_expand=category&_expand=role`).then(res => {
            setnewsInfo({
                ...res.data,
                view: res.data.view + 1
            });
            // 同步后端
            return res.data;
        }).then(res => {
            axios.patch(`http://localhost:8888/news/${props.match.params.id}`, {
                view: res.view + 1
            })
        })
    }, [props.match.params.id]);
    const handleStar=()=>{
        console.log("星星+1");
        setnewsInfo({
            ...newsInfo,
            star:newsInfo.star+1
        });
        axios.patch(`http://localhost:8888/news/${props.match.params.id}`,{
            star:newsInfo.star+1
        })
    }
    return (
        <div style={{margin:'10px'}}>
            {
                newsInfo && <div>
                    <h2 style={{margin:'10px'}}>{newsInfo.title}</h2>
                    <Button style={{marginRight:'5px'}} onClick={()=>handleStar()} type="primary">点亮小星星</Button>
                    <Button onClick={()=>window.history.back()} type="primary">返回</Button>
                    <Descriptions size='small' column={3}>
                        <Descriptions.Item label='创建者'>{newsInfo.author}</Descriptions.Item>
                        <Descriptions.Item label='发布时间'>{
                            newsInfo.publishTime ? moment(newsInfo.publishTime).format('YYYY/MM/DD HH:mm:ss') : '-'
                        }</Descriptions.Item>
                        <Descriptions.Item label='区域'>{newsInfo.region}</Descriptions.Item>
                        <Descriptions.Item label='访问数量'>{newsInfo.view}</Descriptions.Item>
                        <Descriptions.Item label='点赞数量'>{newsInfo.star}</Descriptions.Item>
                        <Descriptions.Item label='评论数量'>0</Descriptions.Item>
                    </Descriptions>
                    {/* 富文本渲染 */}
                    <div dangerouslySetInnerHTML={{
                        __html: newsInfo.content
                    }} style={{
                        margin: "0 24px",
                        border: '1px soild gray'
                    }}></div>
                </div>
            }
        </div>
    )
}
